<template>
  <div class="selector-item">
    <!-- 科目1橙色，科目4绿色 -->
    <div
      :class="[
        'inner',
        { selected: item.id === subjectId },
        { subject1: item.id === 1 },
        { subject2: item.id === 4 },
      ]"
      @click="setSubjectId(item.id)"
    >
      {{ item.subject }}
    </div>
  </div>
</template>

<script>
import { computed } from "vue";
import { useStore } from "vuex";

export default {
  name: "SelectorItem",
  props: {
    item: Object,
  },
  setup() {
    const store = useStore(),
      state = store.state;

    const setSubjectId = (id) => {
      store.commit("setSubjectId", id);
    };

    return {
      subjectId: computed(() => state.subjectId),
      setSubjectId,
    };
  },
};
</script>

<style lang="scss" scoped>
.selector-item {
  width: 50%;
  color: #fff;
  font-size: 0.16rem;
  padding: 0.15rem;
  box-sizing: border-box;

  .inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-radius: 0.05rem;
    padding: 0.5rem 0;
    transition: box-shadow 0.3s;

    &.subject1 {
      background-color: #f0ad4e;
    }

    &.subject2 {
      background-color: #5cb85c;
    }

    &.selected {
      box-shadow: 0.03rem 0.08rem 0.1rem #666;
    }
  }
}
</style>